画像を利用して棒グラフを書く
今回は、画像を利用してグラフィカルな棒グラフを作成する方法を紹介します。ここでポイントとなるのは、棒グラフ用の画像をどのように作成するか。この点にさえ注意すれば、あとはHTMLだけで棒グラフを作成できます。工夫次第でユニークな棒グラフを作成できますので、各自でも研究してみてください。

→ 棒グラフ用の画像を用意する
 
まずは、棒グラフの基となる画像を画像処理ソフトで作成します。このときに注意すべき点は、左右に拡大しても見た目がおかしくならない画像を作成すること。つまり、横方向に変化しない画像を作成するわけです。今回は、以下のような画像を作成し、円柱の棒グラフを作成していきたいと思います。

グラフの基となる画像。画像のサイズは、幅50×高さ24ピクセルで作成しています。また、各画像の色を変化させ、全部で「g1.jpg」〜「g5.jpg」の5色の画像を用意しました。


→ 画像で棒グラフを作成する
 
画像が用意できたら、これを利用して棒グラフを作成していきます。今回も、前回と同様にTABLEを入れ子にし、グラフ全体を1ピクセルの黒い枠線で囲いました。肝心の棒グラフの描画ですが、これはIMGタグにwidth属性を追加し、画像の横幅を拡大表示することで実現します。ここでは、1単位を10ピクセルとして計算しました。また、width属性を追加しただけでは画像の高さも拡大されてしまうので、height属性を追加し、高さを24ピクセル（オリジナルサイズ）に固定しておく必要もあります。
<TABLE border=0 bgcolor=#000000 cellspacing=1>
<TR><TD>
<TABLE border=0 bgcolor=#FFFFFF cellspacing=10>
<TR>
<TD align=right nowrap>大変よい</TD>
<TD nowrap><IMG src="g1.jpg" width=200 height=24>　20</TD>
</TR>
<TR>
<TD align=right nowrap>よい</TD>
<TD nowrap><IMG src="g2.jpg" width=280 height=24>　28</TD>
</TR>
<TR>
<TD align=right nowrap>ふつう</TD>
<TD nowrap><IMG src="g3.jpg" width=350 height=24>　35</TD>
</TR>
<TR>
<TD align=right nowrap>悪い</TD>
<TD nowrap><IMG src="g4.jpg" width=160 height=24>　16</TD>
</TR>
<TR>
<TD align=right nowrap>とても悪い</TD>
<TD nowrap><IMG src="g5.jpg" width=80 height=24>　8</TD>
</TR>
</TABLE>
</TD></TR>
</TABLE>


→ 棒グラフを立体的に見せる
 
これまでに解説した方法でも十分に美しいグラフを作成できますが、その仕組み上、立体的な棒グラフは作成できません。そこで、続いては、立体的な棒グラフを作成する方法を紹介します。ここでのポイントは、「左右に拡大する画像」と「拡大しない画像」を分けて作成することです。具体的には、以下のような2つの画像を作成し、左側の画像だけを拡大して棒グラフの長さを調整します。なお、右側の画像は横幅が30ピクセルあるので、画像をwidth属性の値は、｛（グラフの値×10）−30｝で指定しなければいけません。あとは、右側の画像を右隣に隙間なく並べて配置するだけで棒グラフを完成できます。

グラフの基となる画像は、「左右に拡大する画像」と「拡大しない画像」を分けて作成します。widthで横幅を指定する際は、「拡大しない画像」の横幅を減算するのを忘れないようにしてください。
<TABLE border=0 bgcolor=#000000 cellspacing=1>
<TR><TD>
<TABLE border=0 bgcolor=#FFFFFF cellspacing=10>
<TR>
<TD align=right nowrap>大変よい</TD>
<TD nowrap><IMG src="g1.jpg" width=170 height=24><IMG src="ge1.jpg">　20</TD>
</TR>
<TR>
<TD align=right nowrap>よい</TD>
<TD nowrap><IMG src="g2.jpg" width=250 height=24><IMG src="ge2.jpg">　28</TD>
</TR>
<TR>
<TD align=right nowrap>ふつう</TD>
<TD nowrap><IMG src="g3.jpg" width=320 height=24><IMG src="ge3.jpg">　35</TD>
</TR>
<TR>
<TD align=right nowrap>悪い</TD>
<TD nowrap><IMG src="g4.jpg" width=130 height=24><IMG src="ge4.jpg">　16</TD>
</TR>
<TR>
<TD align=right nowrap>とても悪い</TD>
<TD nowrap><IMG src="g5.jpg" width=50 height=24><IMG src="ge5.jpg">　8</TD>
</TR>
</TABLE>
</TD></TR>
</TABLE>


�y�V���o�C��[UNLIMIT��������1�~] EC�i�r���|�C���� Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I


�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� �����������O�~�y�������������z �C�O���s�����������I �C�O�z�e��